<template>
  <el-row class="head-container">
    <!--头部-->
    <el-col class="logo-container"
            :md="8"
            :sm="3"
            :xs="3">
      <div class="topbar-logo topbar-btn">
        <img :src="companyInfo.company_logo"
             v-if="companyInfo.show_logo_status==1"
             class="logo">
        <p v-if="pageSize.width>=992">{{companyInfo.platform_name||companyInfo.company_name}}</p>
        <i v-if="pageSize.width<992"
           class="fa fa-bars"></i>
      </div>
    </el-col>
    <el-col :md="10"
            :sm="12"
            :xs="14">
      <div class="topbar-title">
        <!-- 注意：这里就是topNavState作用之处，根据当前路由所在根路由的type值判断显示不同顶部导航菜单 -->
        <el-row>
          <el-col :span="24">
            <el-menu :default-active="defaultActiveIndex"
                     class="el-menu-demo"
                     mode="horizontal"
                     @select="handleSelect"
                     :router="false">
              <el-menu-item index="home">首页</el-menu-item>
              <el-menu-item v-for="(item, index) in roleInfo.topNav"
                            :class="item.active?'active':'11'"
                            :key="index"
                            :index="item.menu_id">{{item.menu_name}}</el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <!-- -->
    <el-col :md="6"
            :sm="9"
            :xs="7"
            class="user-icon-col">
      <div class="topbar-account topbar-btn">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link userinfo-inner">
            {{userInfo.user_name || userInfo.phone}}<br>
            {{userInfo.job_name}}
          </span>
          <el-dropdown-menu slot="dropdown">
            <!-- <el-dropdown-item>
              <div>
                <span style="color: #555;font-size: 14px;">个人信息</span>
              </div>
            </el-dropdown-item> -->
            <el-dropdown-item>
              <div class="nav-top-right-select">
                <el-select v-model="companyInfo.company"
                           value-key="global_id"
                           @change="onCompChange"
                           placeholder="请选择">
                  <el-option v-for="item in compArr"
                             :key="item.global_id"
                             :label="item.org_name"
                             :value="item">
                  </el-option>
                </el-select>
              </div>
            </el-dropdown-item>
            <el-dropdown-item @click.native="showWorkBench">工作台</el-dropdown-item>
            <el-dropdown-item @click.native="changePlat">切换业务</el-dropdown-item>
            <el-dropdown-item>
              <div class="nav-top-right-select">
                <el-select v-model="jobvalue"
                           @change="changePost"
                           placeholder="请选择岗位">
                  <el-option v-for="item in postList"
                             :key="item.job_id"
                             :label="`${item.dept_name}-${item.job_name}`"
                             :value="item.job_id">
                  </el-option>
                </el-select>
              </div>
            </el-dropdown-item>
            <el-dropdown-item @click.native="openDialog">
              <div>
                <span style="color: #555;font-size: 14px;">修改密码</span>
              </div>
            </el-dropdown-item>
            <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-col>

    <!-- 修改密码弹窗 -->
    <el-dialog :visible.sync="changePswFormVisible"
               :close-on-click-modal="false"
               @close="closeDialog"
               width="35%">
      <el-form :model="ruleForm"
               ref="ruleForm"
               :rules="rules"
               status-icon
               label-width="80px">
        <el-form-item label="原密码"
                      prop="old_password">
          <el-input v-model="ruleForm.old_password"
                    type="password"
                    class="password-input"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码"
                      prop="password">
          <el-input v-model="ruleForm.password"
                    class="password-input"
                    type="password"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码"
                      prop="confirm_password">
          <el-input v-model="ruleForm.confirm_password"
                    type="password"
                    class="password-input"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="changePswFormVisible = false,clearPass('ruleForm')">取 消</el-button>
        <el-button type="primary"
                   @click="changePsw('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 选择平台 -->
    <el-dialog title="进入平台"
               class="entry-plat"
               :visible.sync="entryPlatDialogVisible"
               width="55%"
               :before-close="entryPlatHandleClose">
      <SelPlatDialog :judgeOpen="judgeOpen"
                     :entryPlatObj="entryPlatObj">
      </SelPlatDialog>
    </el-dialog>
  </el-row>
</template>
<script>
import { loginApi } from '@/services/Login'
import { personalCenterApi } from '@/services/PersonalCenter'
import { SendCodeApi } from '@/services/Public'
import { MyCompanyApi } from '@/services/WorkBench';
import SelPlatDialog from '../../pages/WorkBench/MyCompanyManage/Components/SelPlatDialog';
import { userPermissionApi } from "@/services/UserPermission";
import { initGlobalState } from "qiankun";
import { _ } from '@/helper';
import { ProjectListApi } from "@/services/ProjectCenter";
var checkPwd = (rule, value, cb) => {
  //验证密码的正则表达式
  const regPwd =
    /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*)(?=.*[`~!@#$%^&*()_\-+=<>.?:"{}].*).{10,32}$/
  if (regPwd.test(value)) {
    return cb()
  }
  cb(new Error('密码需包含大小写字母、数字及特殊字符，长度在10-32位之间'))
}
export default {
  components: {
    SelPlatDialog
  },
  data () {
    let checkOldPass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入原密码'))
      } else {
        callback()
      }
    }
    let checkPass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    let checkPassAgain = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      requestParam: {
        province_no: "",
        city_no: "",
        area_no: "",
        company_id: "",
        project_name: "",
        page: 1,
        per_page: 10000000
      },
      jobName: '',//岗位名字
      job_id: '', //岗位id
      postList: [],
      jobvalue: '',
      userMenu: [],//用户菜单 
      entryPlatDialogVisible: false,
      compArr: [],
      defaultActiveIndex: '/',
      userInfo: {},
      companyInfo: {},
      // 单位数据map
      companyMap: new Map(),
      changePswFormVisible: false,
      showBtn: true,
      ruleForm: {
        old_password: '',
        password: '',
        confirm_password: ''
      },
      entryPlatObj: {},
      judgeOpen: 0,//1：弹框打开；0：弹框关闭
      rules: {
        old_password: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          { validator: checkOldPass, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: checkPwd, trigger: 'blur' }
        ],
        confirm_password: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          { validator: checkPassAgain, trigger: 'blur' }
        ]
      },
      navList: {}
    }
  },
  watch: {
    roleInfo: {
      handler (newval, oldval) {
        if (newval.topNav) {
          this.navList = newval
        }
        // console.log(this.navList, this.roleInfo, '000009999999999999', 'newval=======', newval)
      },
      deep: true
    },
    '$store.state.hasTheUnitIncreaStatus': {
      handler (n, o) {
        if (n == 1) {
          this.getCompList();//单位列表更新
          // console.log('状态-hasTheUnitIncreaStatus=', n)
        }
      },
      deep: true
    }
  },
  computed: {
    roleInfo () {
      let store = this.$store.state.roleInfo
      let local = JSON.parse(window.localStorage.getItem('roleInfo')) || {}
      let role = store || local

      return role
    },
    pageSize () {
      let store = this.$store.state.pageSize
      return store || {}
    }

  },
  created () {
    let currentCompanyId = this.$route.query.current_company_id;//工作台页面-进入平台的单位主键值
    let currentOrgId = this.$route.query.current_org_id;//工作台页面-进入平台的组织主键值
    if (currentCompanyId) {
      var objV = {
        company_id: currentCompanyId,
        org_id: currentOrgId
      }
      this.onCompChange(objV);
    }
    // console.log('current_company_id=', this.$route.query.current_company_id)
    let companyInfo = window.localStorage.getItem('companyInfo') || '{}'
    this.companyInfo = JSON.parse(companyInfo);
    if (window.localStorage.userInfo) {
      this.userInfo = JSON.parse(window.localStorage.userInfo)
      this.getCompList()//单位列表  
      this.getPost()  //岗位列表

      let defaultPost = this.userInfo.job_list
      if (defaultPost.length > 0) {
        this.userInfo.job_name = defaultPost[0].job_name
        this.jobvalue = defaultPost[0].job_id
      } else {
        this.userInfo.job_name = ''
        this.jobvalue = ''
      }

    }
  },
  mounted () {
    let checkedMenuID = window.localStorage.getItem('checkedNav') || ''
    this.defaultActiveIndex = checkedMenuID
    if(checkedMenuID){
      this.$nextTick(()=>{
        this.handleSelect(checkedMenuID)
      })
    }
    this.fixedActiveTabs()
  },
  methods: {
    // 获取项目列表
    getProjectList () {
      return ProjectListApi.getProjectList({
        params: this.requestParam
      }).then(
        res => {
          if (res.code === 0) {
            localStorage.removeItem("AllProjectList");//删除
            localStorage.setItem(
              "AllProjectList",
              JSON.stringify(res.data.list)
            );
            // 判断是否已选择了项目，已选择不处理，未选择默认取第一个
            localStorage.removeItem("choosedProject");//删除
            let storage = window.localStorage.getItem("choosedProject") || "{}";
            let choosedProject = JSON.parse(storage);
            choosedProject = choosedProject.project_id
              ? choosedProject
              : res.data.list[0];
            this.$store.dispatch("setProject", choosedProject);
            this.$store.dispatch("setProjectIdList", [
              choosedProject.project_id
            ]);
            let state = {
              projectList: {
                list: []
              },
              choosedProject: {}
            };
            state.choosedProject = choosedProject.project_id
              ? choosedProject : res.data.list[0];
            state.projectList.list = res.data.list || [];
            const actions = initGlobalState(state);
            actions.setGlobalState(state);
          }
        },
        err => {
          console.log(err);
        }
      );

    },
    entryPlatHandleClose (done) {
      this.judgeOpen = 0;
      this.entryPlatObj = {};
      this.entryPlatDialogVisible = false;
      done()
    },
    //当前岗位
    getPost () {
      personalCenterApi.getPostList({
        params: {
          is_page: 0
        }
      }).then(res => {
        this.postList = res.data.list
      }, err => {
        console.log(err);
      })
    },
    changePost (val) {
      this.job_id = val
      this.onChangePost()
    },
    //切换岗位
    onChangePost () {
      MyCompanyApi.ChangePostToken({
        data: {
          job_id: this.job_id
        }
      }).then(async (res) => {
        if (res.code == 0) {
          this.$store.state.switchJobpId = this.job_id;
          var userInfoObj = JSON.parse(window.localStorage.userInfo);
          userInfoObj.job_list[0].job_id = this.job_id;
          this.postList.forEach(item => {
            if (this.job_id === item.job_id) {
              userInfoObj.job_list[0].job_name = item.job_name
            }
          })
          this.userInfo = userInfoObj
          this.userInfo.job_name = this.userInfo.job_list[0].job_name
          JSON.parse(window.localStorage.userInfo)
          window.localStorage.setItem('userInfo', JSON.stringify(res.data));//修改值
          sessionStorage.setItem('access_token', res.data.access_token);//更新值
          localStorage.setItem('access_token', res.data.access_token);//更新值
          await this.getProjectList();//项目列表重置
          await this.getUserAuth()// 获取用户权限
          await this.getMenuTree()//获取菜单 
          window.localStorage.setItem('platFormActiveTab', 'hompage');//当前菜单
          this.$store.state.activeTab = 'homepage'
          this.$router.push({ path: '/homepage' })
          location.reload();
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    //切换业务
    changePlat () {
      MyCompanyApi.getPlatList({
        params: {
          is_page: 0,
          company_id: this.companyInfo.company.company_id,
          status: 3//审核状态，2：审核中，3：通过，4：拒绝（驳回）
        }
      }).then((res) => {
        if (res.data.list.length > 0) {
          this.judgeOpen = 1;
          this.entryPlatObj = {};
          this.entryPlatDialogVisible = true;
        }
        // console.log('平台列表res=', res)
      }).catch((error) => {
        console.log('error')
      })
    },
    //展示单位初始化设置
    showWorkBench () {
      this.$router.push({ path: '/workbenchMyUnit', query: { topPage: '平台里跳转' } });//单位初始化设置-我的单位
    },
    //单位列表
    getCompList () {
      this.companyInfo.company = {};//当前用户所在的单位
      this.$store.state.switchCompId = '';//当前用户所在的单位
      return MyCompanyApi.getMyCompany({
        params: {
          is_page: 0//不分页
        }
      }).then((res) => {
        if (res.data.list.length > 0) {
          this.compArr = res.data.list;
          if (this.userInfo.comp_id == '0' || this.userInfo.comp_id == 0) {
            this.compArr.forEach(ele => {
              this.companyMap.set(ele.company_id, ele)
              if (ele.status == 3) {
                // this.onCompChange(ele.company_id);//当用户的所在单位为0时执行-默认首个通过的为当前单位
                // 参数是对象
                this.onCompChange(ele)
                throw Error()
              }
            })
          } else {//用户的所在单位非0时执行
            this.compArr.forEach(ele => {
              this.companyMap.set(ele.company_id, ele)
              if (ele.company_id == this.userInfo.comp_id) {
                //判断当前选中的是哪一个.org_id=0就是正常情况.单位id company_id不重复的情况
                if (ele.org_id === 0) {
                  this.companyInfo.company.global_id = ele.global_id
                } else {
                  //不等于就是有重复id,org_id有值,用is_cur判断 1就是当前选中的.is_cur只在company值相等的时候会变
                  if (ele.is_cur === 1) {
                    this.companyInfo.company.global_id = ele.global_id
                  }
                }

                // this.companyInfo.company_id.company = this.userInfo.comp_id;//当前用户所在的单位
                this.$store.state.switchCompId = this.userInfo.comp_id;//当前用户所在的单位
              }
            });
            if(!this.companyInfo.company.global_id){
              this.onCompChange(this.compArr[0])
              throw Error()
            }
          }
          this.$store.state.hasTheUnitIncreaStatus = 0;//单位是否有增加的状态重置
        } else if (res.data.list.length == 0) {
          this.$message.warning('请在"单位初始化设置-我的单位-单位列表"加入单位或创建单位的操作')
        }
      }).catch((error) => {
        console.log('error=', error)
      })
    },
    lookComp (val) {//获取单位信息
      MyCompanyApi.lookComp({
        params: {
          org_id: val
        }
      }).then((res) => {
        window.localStorage.setItem("companyInfo", JSON.stringify(res.data));
      }).catch((error) => {
        console.log(error)
      })
    },
    // 获取用户权限
    getUserAuth () {
      return userPermissionApi.getUserAuth({
        data: {
          user_id: JSON.parse(window.localStorage.userInfo).user_id
        }
      }).then(res => {
        let userAuthList = res.data.list;
        if (userAuthList) {
          this.$store.dispatch("setUserAuth", res.data.list);
        }
      },
        err => {
          console.log(err);
        }
      );
    },
    setUserMenu () {//设置用户菜单
      let roleInfo = {
        nav: {},
        topNav: []
      };
      this.$store.dispatch("addRole", roleInfo);
      let first = "";
      this.userMenu.map(item => {
        roleInfo.nav[item.menu_id] = item.children_list;
        roleInfo.topNav.push(item);
      });
      first = roleInfo.topNav[0].menu_id;
      window.localStorage.setItem("platFormRoleInfo", JSON.stringify(roleInfo));
      if (
        window.localStorage.getItem("platFormSideNav") === "undefined" ||
        window.localStorage.getItem("platFormSideNav") === null
      ) {
        this.$store.dispatch("sideNav", roleInfo.nav[first]);
        window.localStorage.setItem(
          "platFormSideNav",
          JSON.stringify(roleInfo.nav[first])
        );
      }
    },
    // 获取菜单
    getMenuTree () {
      // window.localStorage.setItem('platFormActiveTab', '');//当前菜单
      // this.$store.state.activeTab = ''
      this.$store.dispatch('setActiveTab', '')//当前菜单
      window.localStorage.setItem('platFormActiveTabsList', JSON.stringify([]));//已选的菜单清除
      this.$store.dispatch('resetActiveTabsList', []) //已选的菜单清除
      this.$store.dispatch('sideNav', [])//左边菜单重置
      window.localStorage.setItem('platFormSideNav', JSON.stringify([]))//左边菜单重置
      let userId = window.localStorage.getItem("user_id");
      // console.log(this.$router.options.routes, 'add route')
      return userPermissionApi
        .getMenuTree({
          data: {
            user_id: userId
          }
        })
        .then(res => {
          // console.log(res, 'menu tree')
          let map = new Map();
          // 所有用户都要显示5个中心加首页，所以写死5个中心的菜单编号，与接口数据对比，没有就设置空数组
          let menuNoList = [
            { no: "project_center", name: "项目中心" },
            { no: "work-center", name: "工作中心" },
            { no: "personal-center", name: "个人中心" },
            { no: "resource-center", name: "资源中心" },
            { no: "config-center", name: "配置中心" },
            // { no: "work-bench", name: "工作台" }
          ];
          let menuList = [];
          if (res.data.list.length > 0) {
            // 以菜单编号为key，存入map
            res.data.list.map(item => {
              map.set(item.menu_no, item);
            });
            // 手动添加首页
            // menuList.push({
            //   menu_id: 'home_page',
            //   menu_name: '首页',
            //   route_url: 'homepage',
            //   menu_type: '1'
            // })
            // 遍历写死的菜单列表，与接口数据对比，有数据的以接口数据为准，没有的模拟一个对象
            menuNoList.map(menuNo => {
              let val = map.get(menuNo.no);
              if (val !== undefined) {
                menuList.push(val);
              } else {
                menuList.push({
                  menu_id: menuNo.no,
                  menu_name: menuNo.name,
                  children_list: []
                });
              }
            });
            // this.userMenu = res.data.list;
            this.userMenu = menuList;
            // this.$store.dispatch('setUserMenu', this.userMenu)
            this.setUserMenu();
          }
        });
    },
    onCompChange (val) {//单位改变后触发的事件
      // let companyId = val.company
      let companyId = val.company_id
      //获取token
      let company = this.companyMap.get(companyId)
      MyCompanyApi.comChangeGetToken({//切换单位更新token值
        data: {
          company_id: companyId,
          // org_id: company.org_id || ''
          org_id: val.org_id
        }
      }).then(async (res) => {
        if (res.code == 0) {
          // this.lookComp(val);//获取当前单位的信息          
          // var userInfoObj = JSON.parse(window.localStorage.userInfo);

          // userInfoObj.comp_id = companyId;
          // userInfoObj = res.data
          window.localStorage.setItem('userInfo', JSON.stringify(res.data));//修改值
          sessionStorage.setItem('access_token', res.data.access_token);//更新值
          localStorage.setItem('access_token', res.data.access_token);//更新值-2022.02.20
          await this.getUserAuth()// 获取用户权限
          await this.getMenuTree()//获取菜单 
          window.localStorage.setItem('platFormActiveTab', 'hompage');//当前菜单
          this.$store.state.activeTab = 'homepage';
          this.$router.push({ path: '/homepage' });
          location.reload();
        } else {
          this.companyInfo.company.company_id = this.$store.state.switchCompId;
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    handleSelect (key, keyPath) {
      let activeNav = this.roleInfo.nav[key]
      // console.log(key, this.$route, 'top nav select')
      if (activeNav) {
        this.$store.dispatch('sideNav', activeNav)
        window.localStorage.setItem('platFormSideNav', JSON.stringify(activeNav))
        window.localStorage.setItem('checkedNav', key)
      }
      if (key !== 'home') {
        // 当前页面是home时，点击一级菜单会跳转到该菜单下第一个页面
        this.getMenuFirstPage(activeNav)
      }
      if (key === 'home') {
        window.localStorage.setItem('checkedNav', 'home')
        this.$router.push({
          path: '/homepage'
        })
      }
    },
    // 获取指定菜单下第一个页面
    async getMenuFirstPage (menu) {
      if (menu[0].children_list) {
        this.getMenuFirstPage(menu[0].children_list)
      } else {
        // nav.menu_type === '2'  
        var strRouteUrl = menu[0].route_url;
        var typeVal = menu[0].menu_type;
        if (typeVal === '2' && (strRouteUrl != '' && (strRouteUrl.indexOf("http://") != -1 || strRouteUrl.indexOf("https://") != -1))) {
          await this.$router.push({
            path: '/building'
          });
        } else {
          if(this.$route.path!='/' + menu[0].route_url){
            await this.$router.push({
              path: '/' + menu[0].route_url
            });
          }
          // await location.reload();//强制刷新；
        }
      }
    },
    // 切换左侧菜单折叠状态
    toggleLeftNav (e) {
      e.preventDefault()
      let isCollapse = this.$store.state.isLeftNavCollapse
      this.$store.dispatch('setLeftNavCollapse', !isCollapse)
    },
    // 退出登录
    logout () {
      this.$confirm('此操作将退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // loginApi.logout({
        // }).then(res => {
        //   if (res.msg === 'SUCCESS') {
        //     this.$message({
        //       type: 'success',
        //       message: '已退出登录!'
        //     })
        //     window.sessionStorage.removeItem('token')
        //     window.sessionStorage.removeItem('user_id')
        //     window.sessionStorage.removeItem('userInfo')
        //     this.$router.push('./login')
        //   }
        // })
        // window.sessionStorage.removeItem('token')
        window.localStorage.removeItem('token')
        let originUrl = window.localStorage.getItem('originUrl')
        if (originUrl) {
          window.location.href = originUrl
        } else {
          this.$router.push({
            path: '/login'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        })
      })
    },
    openDialog () {
      this.changePswFormVisible = true
    },
    // 修改密码
    changePsw (ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          SendCodeApi.changePassword({
            data: {
              old_password: this.ruleForm.old_password,
              user_id: this.userInfo.user_id,
              new_password: this.ruleForm.password,
            }
          }).then(res => {
            if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '修改成功，请重新登录!'
              })
              // window.sessionStorage.removeItem('token')
              window.localStorage.removeItem('token')
              window.sessionStorage.removeItem('user_id')
              window.sessionStorage.removeItem('userInfo')
              this.$router.push('./login')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 清除密码
    clearPass (ruleForm) {
      this.$refs[ruleForm].resetFields()
    },
    // 修改密码对话框关闭回调
    closeDialog () {
      this.clearPass('ruleForm')
    },
    // 监测页面滚动，在滚动一定距离后让标签栏fixed
    fixedActiveTabs () {
      let container = document.getElementsByClassName('content-container')
      let content = document.getElementsByClassName('grid-content')
      container[0].addEventListener('scroll', _.throttle(() => {
        let clientRect = content[0].getBoundingClientRect()
        let pos = {
          top: clientRect.top,
          width: clientRect.width
        }
        this.$store.dispatch('getScrollTop', pos)
        // console.log(clientRect, 'client rect')
      }, 100))
    }
  }
}
</script>
<style scoped lang="scss">
/deep/ .password-input {
  width: 80%;
}
/deep/ .password-code {
  width: 48%;
}
/deep/ .change-btn {
  width: 31%;
}
.head-container {
  width: 100vw;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid #f1f2f7;
  padding: 0 15px;
  .el-col {
    height: 65px;
  }
  .logo-container {
    display: flex;
    align-items: center;
    .topbar-logo {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      img {
        width: 40px;
        height: 40px;
        margin-right: 14px;
      }
      p {
        font-size: 18px;
        color: #000;
      }
    }
  }
  .el-menu.el-menu--horizontal {
    height: 65px;
    line-height: 65px;
    display: flex;
    align-items: center;
    border-bottom: 0;

    .el-menu-item {
      height: 39px;
      line-height: 39px;
      border-bottom: 0;
      border-radius: 0;
      padding: 0 10px;
      margin: 0 10px;
      &:hover,
      &:focus {
        color: #333;
        background-color: #eee;
        border-bottom: 0;
      }
      &:focus {
        background: none;
      }
      .is-active {
        border-bottom: 2px solid #409eff;
      }
    }
  }
  .user-icon-col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .topbar-account {
      width: 112px;
      height: 43px;
      text-align: center;
    }
  }
}
/deep/ .el-select .el-input .el-select__caret {
  position: absolute;
  color: #000;
}
.userinfo-inner{
  cursor: pointer;
}
</style>
